<div id="usermenu-vue">
    <template v-for="menuitem in menuitems" v-if="menuitem.visible">
        <button class="um-option" :style="menuitem.style" @click="close();menuitem.onclick();">
            <div class="row">
                <div class="col">
                    {{ menuitem.label }}
                </div>
                <div class="col-auto" v-if="menuitem['svg']" v-html="menuitem.svg">

                </div>
                <div class="col-auto" v-else-if="menuitem['icon']">
                    <div class="context-menu__option-icon"></div>
                </div>
            </div>
        </button>
    </template>
</div>

<style>
    .um-option {
        width: 100%;
        display: block;
        text-align: left;
        padding: 10px;
        border-radius: 0px;
    }

    .um-option:not(:last-child) {
        border-bottom-style: solid;
        border-bottom-width: .5px;
        border-bottom-color: var(--contextMenuBorderColor);
    }

    .um-option:hover {
        background: var(--systemQuinary);
    }

    .um-option:active {
        animation: um-blink .1s var(--appleEase)
    }


    @keyframes um-blink {
        0% {
            background: var(--systemQuinary);
        }
        50% {
            background: transparent;
        }
        100% {
            background: var(--systemQuinary);
        }
    }

</style>